<template>
  <div class="q-pa-md q-gutter-sm">
    <form
      autocorrect="off"
      autocapitalize="off"
      autocomplete="off"
      spellcheck="false"
    >
      <t-editor ref="editorRef" @paste="onPaste" v-model="editor" />
    </form>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const editorRef = ref(null);

      return {
        editorRef,
        editor: ref(
          'Try pasting some rich text here,' +
            ' such as from Discord or Webstorm.' +
            "<br/>You can't paste images either!!!",
        ),

        /**
         * Capture the <CTL-V> paste event, only allow plain-text, no images.
         * See: https://stackoverflow.com/a/28213320
         */
        onPaste(evt) {
          // Let inputs do their thing, so we don't break pasting of links.
          if (evt.target.nodeName === 'INPUT') return;
          let text, onPasteStripFormattingIEPaste;
          evt.preventDefault();
          evt.stopPropagation();
          if (evt.originalEvent && evt.originalEvent.clipboardData.getData) {
            text = evt.originalEvent.clipboardData.getData('text/plain');
            editorRef.value.runCmd('insertText', text);
          } else if (evt.clipboardData && evt.clipboardData.getData) {
            text = evt.clipboardData.getData('text/plain');
            editorRef.value.runCmd('insertText', text);
          } else if (window.clipboardData && window.clipboardData.getData) {
            if (!onPasteStripFormattingIEPaste) {
              onPasteStripFormattingIEPaste = true;
              editorRef.value.runCmd('ms-pasteTextOnly', text);
            }
            onPasteStripFormattingIEPaste = false;
          }
        },
      };
    },
  };
</script>
